<template>
  <div class="top-box">
    <div class="admin-top">
      <router-link target="_blank" to="/HomePage" :title="$t('chat.head.title')">
        <img src="../../../assets/images/common/logo2.png" width="70px" style="margin-top: 5px">
      </router-link>
      <div class="headPho" @mouseover="homeSubShow()" @mouseout="homeSubDisappear()">
        <div class="home" id="home">
          <img title="." id="my" :src="user.userHeadPortrait" alt="" width="25px" style="border-radius: 50%">
          <div class="home-sub" style="display: none;" id="home-sub">
            <div class="home-sub-top"></div>
            <ul>
              <a href="javscript:;"><li><i class="iconfont icon-shouye" style="font-size: 20px"></i>{{$t('chat.head.homepage')}}</li></a>
              <a href="javascript:;"><li @click="logout"><i class="iconfont icon-tuichu" style="font-size: 20px"></i>{{$t('chat.head.logout')}}</li></a>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: "ChatPage-Head",
        data(){
            return{
                user:'',
                baseURL:"http://localhost:8081/user/query/",
                baseURL2:"http://localhost:8081/loginReg/logout",
            }
        },
        mounted(){
          this.getLoginUserInfo()
        },
        methods:{
            getLoginUserInfo(){
                this.axios.get(this.baseURL).then((res)=>{
                    this.user = res.data
                }).catch(
                    exception=>{
                        console.log(exception)
                    }
                )
            },
            logout(){
                this.axios.post(this.baseURL2).then((res) =>{
                    if (res.data==false){
                        this.failOpt(this.$t('chat.head.logout'))
                    }else {
                        this.$router.push('/loginRegistrationPage/login')
                    }
                }).catch(
                    exception=>{
                        console.log(exception)
                    }
                )
            },
            homeSubShow() {
                if(document.getElementById("home-icon")) document.getElementById("home-icon").className="iconfont icon-addressbook_fill"
                document.getElementById("home-sub").style.display="block"
            },
            homeSubDisappear() {
                if(document.getElementById("home-icon")) document.getElementById("home-icon").className="iconfont icon-addressbook"
                document.getElementById("home-sub").style.display="none"
            },
            successOpt(message) {
                this.$notify({
                    title: this.$t('notify.success'),
                    message: message,
                    type: 'success'
                })
            },
            failOpt(message) {
                this.$notify.error({
                    title: this.$t('notify.error'),
                    message: message
                });
            }
        }
    }
</script>

<style scoped>
  .top-box{
    width: 100%;
    margin: 0px auto;
    letter-spacing: 1px;
    background-color: rgb(51, 51, 51);
    position: fixed;
    top: 0px;
    letter-spacing: 1px;
    z-index: 999;
  }
  .admin-top{
    /*width: 90%;*/
    width: 1000px;
    height: 50px;
    margin: 0px auto;
    background-color: rgb(51, 51, 51);
    position: relative;

  }
  /*.logo{*/
  /*  position: absolute;*/
  /*  top: 15px;*/
  /*  left: 0px;*/
  /*  font-size: 20px;*/
  /*  color: rgb(226, 226, 226);*/
  /*  font-weight: bolder;*/

  /*}*/

  .headPho{
    position: absolute;
    top: 12px;
    right: 0px;
    border-radius: 50%;
  }
  .home{
    position: relative;
  }
  .home-sub{
    width: 150px;
    height: 102px;
    background-color: rgba(255, 255, 255, 0.95);
    margin-top: 20px;
    position: absolute;
    top: 23px;
    right: -62px;
    box-shadow: 0px 0px 5px rgb(190, 190, 190) ;
    border-radius: 3px;
  }
  .home-sub-top{
    width: 0px;
    height: 0px;
    border: transparent solid 10px;
    border-bottom: rgb(255, 255, 255) solid 10px;
    position: absolute;
    top: -20px;
    left: 65px;
  }
  .home-sub ul{
    position:absolute;
    top: -10px;
    left: -40px;
  }
  .home-sub li{
    width: 150px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-size: 16px;
    color: rgb(63, 63, 63);
  }
  .home-sub li:hover{
    background-color: #f7f7f7;
  }
  .home-sub li:nth-child(1){
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
  }
  .home-sub li:nth-child(2){
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
  }
</style>
